<template>
  <div class="study">
    <title-bar>
      <div class="title-content" v-if="study">
        <div class="top">
          <span>学习工厂</span>
          <div>{{study.length}}站</div>
        </div>
      </div>
      <div class="study-else" v-else>这里还未普及</div>
    </title-bar>
    <study-content class="study-content">
      <study-item
        v-for="(item, index) in study"
        :key="index"
        @addToCollect="addToCollect(item)"
        :isCollect="isCollect(item)"
        class="study-coms">
        <template v-slot:item>
          <a :href="item.url" class="item" target="_blank">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="text">
              <div class="title">{{ item.name }}</div>
              <div class="dec">{{ item.dec }}</div>
            </div>
          </a>
        </template>
        <template v-slot:nature-content>
          <div class="nature">{{ item.nature }}</div>
        </template>
      </study-item>
    </study-content>
  </div>
</template>

<script>
import { getStudyMultidata } from "../../network/study";
import StudyContent from "./studyChild/StudyContent.vue";
import StudyItem from "./studyChild/StudyItem.vue";
import TitleBar from '../../components/titleBar/TitleBar.vue'
export default {
  data() {
    return {
      study: null,
    };
  },
  components: {
    StudyContent,
    StudyItem,
    TitleBar
  },
  created() {
    this.getStudyMultidata();
  },
  computed: {
    collectList() {
      return this.$store.state.collectList;
    },
  },
  methods: {
    getStudyMultidata() {
      getStudyMultidata().then((res) => {
        this.study = res;
        console.log(this.study);
      });
    },
    // 将点击收藏的那条数据传入
    addToCollect(item) {
      console.log(item);
      const collect = {};
      collect.img = item.img;
      collect.url = item.url;
      collect.name = item.name;
      collect.dec = item.dec;
      collect.nature = item.nature;
      this.$store.dispatch("addCollect", collect).then((res) => {
        console.log(res);
      });
    },

    //判断是否在收藏夹
    // 这里的函数最终是以Boolean之传出 在父组件上:isCollect="isCollect(item)"
    isCollect(i) {
      // console.log(i);
      let oldCollect = null;
      if (this.collectList) {
        oldCollect = this.collectList.find((item) => {
          return item.url == i.url;
        });
        if (oldCollect) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.study {
  padding: 30px 0;
}
.top{
  display: flex;
  position: relative;
  height: 40px;
  line-height: 40px;
  div{
    font-size: 20px;
    font-weight: 600;
    margin-left: 2px;
    color: rgb(250, 41, 76);
  }
}
.study-else{
  height: 40px;
  line-height: 40px;
  font-size: 20px;
   font-weight: 600;
  color: rgb(250, 41, 76);
}

.study-coms {
  height: 100px;
  border-radius: 10px;
  margin: 16px 28px;
  background-color: #fff;
}
.img {
  flex: 12%;
  padding: 20px;
}
img {
  width: 80%;
}
.text {
  flex: 88%;
  padding: 16px 0px;
}
.text .title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.text .dec {
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  font-weight: 400;
}

a:hover {
  color: #149ed2;
}
.nature {
  text-align: center;
  background-color: greenyellow;
  font-size: 12px;
  border-radius: 4px;
}
</style>